<template>
  <div>
    <el-menu
      @select="selectNode"
      :collapse="homedata.isCollapse" :style="{width:homedata.leftWidth+'px'}">
      <el-submenu v-for="menu in menus" :index="menu.id+''">
        <template slot="title">
          <i :class="['iconfont',menu.menuIcon]"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <el-menu-item v-for="chi in menu.childrens" :index="chi.id+''" @click="selectNode(chi.pageUrl)">
          <template slot="title">
            <i :class="['iconfont',chi.menuIcon]"></i>
            <span slot="title">{{chi.name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "Left",
    props:['homedata'],
    data() {
      return {
        menus: [],
        isCollapse: false
      }
    },
    methods: {
      selectNode(url) {
        this.$router.push(url)
      }
    }, mounted() {
      var that = this;
      axios.get("/static/data.json").then(function (response) {
        that.menus = response.data.menus;
        // console.log(that.menus);
      })

    }
  }
</script>

<style scoped>

</style>
